<template>
		<div class="app-home">
			<div class="page-header fx-block-title">
			<div class="page-header__text">{{title}}</div>
			<div class="btn-tools">
				<el-button type="text" size='mini' class="tools">工具下载</el-button>
				<el-button type="text" size='mini' class="tools">帮助中心</el-button>
				<el-button type="text" size='mini' class="tools">联系我们</el-button>
				<el-popover
					popper-class="dialog-tools-popover"
					placement="bottom"
					trigger="click">
					<div style="text-align:center;display:flex;flex-direction: column;">
						<w-link icon="login-out" type="default" @click="onChangePWClick">修改密码</w-link>
						<w-link icon="login-out" type="default" @click="onLoginOutClick">退出登录</w-link>
					</div>
					<div slot="reference" class="title-tools fx-cursor"><span class="title">【你好，{{userName}}】</span></div>
				</el-popover>
			</div>
			</div>
			<div style="height: 10px;background-color: #eee">
			</div>
			<fxchangePW :dialogVisible="changePWDialogVisibled"></fxchangePW>
		</div>
</template>
<script>
import fxchangePW from '@/components/common/Fx-changePW.vue'
export default {
	name: 'fx-page-header',
	components: {
		fxchangePW
	},
	data () {
		return {
			changePWDialogVisibled: false
		}
	},
	props: {
		title: String
	},
	computed: {
		userName () {
			return window.localStorage.name
		}
	},
	methods: {
		onChangePWClick () {
			console.log(this.fxchangePW)
			this.changePWDialogVisibled = true
		},
		onLoginOutClick () {
			const userId = {
				userId: window.localStorage.userId
			}
			this.$fxConfirm('退出登录？').then(() => {
				this.$fxApi('auth.loginOut')({
					data: userId
				}).then(() => {
					window.localStorage.removeItem('token')
					window.localStorage.removeItem('name')
					window.localStorage.removeItem('userId')
					window.location.href = '/'
				})
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.app-home {
	display: flex;
	flex-direction: column;
}
.page-header {
	display: flex;
	flex-direction: row;
	height: 44px;
	align-items: center;
	font-size: 15px;
	font-weight: 700;
	position:relative
	padding-left: 5px
	&__text {
		flex: 1;
	}
	.btn-tools {
		height: 32px
		display: flex;
		margin-right: 26px
		.tools {
			margin-right: 5px
		}
		.title-tools {
			color: #409EFF
			font-size: 12px
			font-weight: normal
			line-height: 31px
			.title {
				&:hover {
					color: $fxOrange
				}
			}
		}
	}
}
</style>
